<template>
  <div id="home">
    <navbar colss="navbar"><div slot="cente">购物街</div></navbar>
    <tabcontrol
      :titles="titles"
      @tabbarclick="tabbarclick"
      ref="tabofftp1"
      class="tabcontrol"
      v-show="istabfixed"
    ></tabcontrol>
    <scroll
      class="content"
      ref="backtop"
      :probe-type="3"
      :pull-up-load="true"
      @pullingUp="pullingUpup"
      @scroll="scrollclick"
    >
      <homeswiper
        :banners="banners"
        @swiperimageload="swiperimageload"
      ></homeswiper>
      <recommendview :recommend="recommends"></recommendview>
      <featureview />
      <tabcontrol
        :titles="titles"
        @tabbarclick="tabbarclick"
        ref="tabofftp2"
      ></tabcontrol>
      <goodslist :goods="goods[clicktype].list"></goodslist>
    </scroll>
    <!-- .native 监听组件根源上的原生事件， -->
    <backTop @click.native="backclick" v-show="isshow"></backTop>
  </div>
</template>

<script>
import homeswiper from "./childcomps/homeswiper.vue"; //轮播图组件
import recommendview from "./childcomps/recommendview.vue"; //首页组件
import featureview from "./childcomps/featureview.vue"; //首页组件

import Navbar from "components/common/navbar/navbar.vue"; //首页导航
import tabcontrol from "components/content/tabcontrol/tabcontrol.vue"; //
import goodslist from "components/content/goods/goodslist.vue";
import scroll from "components/common/scroll/scroll.vue";
import backTop from "components/content/backtop/backtop.vue";

import { gethomemultidata, gethome } from "network/home"; //导入用大括号 导出时没用default
import { debounce } from "common/utils";

export default {
  name: "home",
  components: {
    Navbar,
    homeswiper,
    recommendview,
    featureview,
    tabcontrol,
    goodslist,
    scroll,
    backTop,
  },
  data() {
    return {
      //创建一个变量来存储网络请求过来的数据
      banners: [],
      recommends: [],
      titles: ["流行", "新款", "精选"],
      goods: {
        //存放titles请求过来的数据
        ["pop"]: { page: 0, list: [] }, //精选
        ["new"]: { page: 0, list: [] }, //新款
        ["sell"]: { page: 0, list: [] }, //精选
      },
      clicktype: "pop",
      isshow: false,
      taboffsetop: 0,
      istabfixed: false,
      itemimslist: null,
    };
  },
  created() {
    //创建时生命周期函数
    //请求多个数据
    //写主要逻辑
    this.gethomemultidata();
    this.gethome("pop");
    this.gethome("new");
    this.gethome("sell");
  },
  mounted() {
    //挂载时生命周期函数
    // const refresh = debounce(this.$refs.backtop.refresh, 50);
    // this.$bus.$on("itmeimage", () => {
    //   refresh();
    // });
    this.itemimslist = () => {
      this.$refs.backtop.refresh();
    };
    this.$bus.$on("itmeimage", this.itemimslist);
    //获取tabcontrol的top
  },
  computed: {},
  deactivated() {
    //取消全局事件的监听
    this.$bus.$off("itmeimage", this.itemimslist);
  },
  methods: {
    //事件监听

    tabbarclick(index) {
      this.clicktype = Object.keys(this.goods)[index];
      this.$refs.tabofftp1.currentIndex = index;
      this.$refs.tabofftp2.currentIndex = index;
    },
    //点击小图标回到顶部
    backclick() {
      //可以通过$refs.backtop来获取到scroll对象 在调用scrollTo方法
      this.$refs.backtop.scroll.scrollTo(0, 0, 500);
    },
    //判断show
    scrollclick(position) {
      // console.log(position);
      this.isshow = -position.y > 800;
      //决定是否吸顶
      this.istabfixed = -position.y > this.taboffsetop;
    },
    //上拉加载
    pullingUpup() {
      this.gethome(this.clicktype);
    },
    //网络请求
    gethomemultidata() {
      gethomemultidata().then((res) => {
        // console.log(res);
        this.banners = res.data.data.banner.list;
        this.recommends = res.data.data.recommend.list;
      });
    },
    gethome(type) {
      const page = this.goods[type].page + 1; //拿到当前传来的数据 再加上1
      gethome(type, page).then((res) => {
        // console.log(res);
        this.goods[type].list.push(...res.data.data.list); //把请求过来的数据保存到goods的list中
        this.goods[type].page += 1; //当list存放数据之后就让让当前数组加上一
        //调用这个方法下次才能继续拖动
        this.$refs.backtop.finishPullUp();
      });
    },
    swiperimageload() {
      this.taboffsetop = this.$refs.tabofftp2.$el.offsetTop;
    },
  },
};
</script>

<style scoped>
#home {
  /* margin-top: 44px; */
  height: 100vh;
  /* vh ->viewport height  视口 */
  position: relative;
}
.navbar {
  background-color: cornflowerblue;
  color: aliceblue;
}
.content {
  /* height: 300px; */
  overflow: hidden;

  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
}
.tabcontrol {
  position: relative;
  z-index: 9;
}
</style>